<template>
  <div style="width: 900px;height: 500px;border-radius: 5px ;box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)">
    <el-row :gutter="20">
      <el-col :span="12">
        <div class="grid-content bg-purple">
          <el-form>
            <el-form-item label="选择角色" :label-width="formLabelWidth">
              <template>
                <el-select v-model="chooseRole" placeholder="请选择" @change="roleChange">
                  <el-option v-for="(item,index) in roles" :key="index" :value="item.role">
                  </el-option>
                </el-select>
              </template>
            </el-form-item>
          </el-form>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content bg-purple">

          <el-button type="text" @click="addMenu">增加权限 Dialog</el-button>



          <el-dialog title="提示" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">

            <el-form :model="ruleForm" status-icon ref="ruleForm" label-width="100px" class="demo-ruleForm">
              <el-form-item label="标题">
                <el-input type="text v-model=" v-model="ruleForm.title" autocomplete="off"></el-input>
              </el-form-item>

              <el-form-item label="注册组件">
                <el-input type="text" v-model="ruleForm.component" autocomplete="off"></el-input>
              </el-form-item>

              <!-- <el-form-item label="">
                <el-input v-model.number="ruleForm.fid"></el-input>
              </el-form-item> -->
              <el-form-item label="选择父类菜单">
                <template>
                  <el-select v-model="fatherMenuName" placeholder="选择父类菜单" @change="fatherMenuChange">
                    <el-option v-for="(menu,index) in menuFather" :key=" index" :value="menu.title">
                    </el-option>
                  </el-select>
                </template>
              </el-form-item>

              <el-form-item label="path路径">
                <el-input v-model.number="ruleForm.path"></el-input>
              </el-form-item>


              <el-form-item label="是否显示">
                <el-switch v-model="ruleForm.requireAuth" active-color="#13ce66" inactive-color="#ff4949"
                  @change="showSwitch">
                </el-switch>
              </el-form-item>

              <el-form-item label="name">
                <el-input v-model.number="ruleForm.name"></el-input>
              </el-form-item>

              <!-- <el-form-item>
                <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
                <el-button @click="resetForm('ruleForm')">重置</el-button>
              </el-form-item> -->
            </el-form>
            <span slot="footer" class="dialog-footer">
              <el-button @click="dialogVisible = false">取 消</el-button>
              <el-button type="primary" @click="submitForm">确 定</el-button>
            </span>
          </el-dialog>
          <el-button type="text" @click="dialogVisible_father = true">增加父级菜单</el-button>
        </div>
        <el-dialog title="提示" :visible.sync="dialogVisible_father" width="30%" :before-close="handleClose">

          <el-form :model="ruleForm" status-icon ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="父级菜单名字">
              <el-input type="text" v-model="fatherObj.title" autocomplete="off"></el-input>
            </el-form-item>

          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible_father = false">取 消</el-button>
            <el-button type="primary" @click="addFather">确 定</el-button>
          </span>
        </el-dialog>


      </el-col>
      <el-col :span="6">
        <div class="grid-content bg-purple"></div>
      </el-col>
    </el-row>


    <el-row :gutter="24">
      <el-col :span="6">
        <div class="grid-content bg-purple"></div>
      </el-col>
      <el-col :span="20" :offset="3">
        <div class="grid-content bg-purple">
          <el-transfer v-model="value" :titles="['剩余可用权限', '已经拥有权限']" :data="data" :props="{
            key: 'menuId',
            }" @change="selectChange" filterable filter-placeholder="请输入权限名字" :button-texts="['减少权限', '增加权限']">
            <span slot-scope="{ option }">{{ option.key }} - {{ option.label }}</span>
            <!-- <el-button class="transfer-footer" slot="left-footer" size="small" @left-check-change="selectChange1">操作
            </el-button>
            <el-button class="transfer-footer" slot="right-footer" size="small">操作</el-button
              @change="left-check-change"> -->
          </el-transfer>
        </div>
      </el-col>

    </el-row>
  </div>


</template>

<script>
  import menuApi from '@/api/menu'
  import roleApi from '@/api/role'
  export default {
    data() {

      return {
        data: [], //返回的所有权限菜单
        value: [], //被选中的权限菜单
        formLabelWidth: '120px',
        roles: [],
        chooseRole: '经理',
        roleId: 1,
        dialogVisible: false,

        ruleForm: {
          title: '',
          component: '',
          fid: '',
          fatherMenu: '',
          path: '',
          requireAuth: true,
          name: ''
        }, //菜单对象
        fatherMenuName: '',
        menuFather: [], //父级的所有菜单 
        dialogVisible_father: false,
        fatherObj: {
          title: ''
        },

      };
    },
    created() {
      this.getRoleMenu()
      this.getAllRole()
      this.findAllFidMenu()
    },

    watch: {
      //使用监听来刷新更新权限
      menuFather: {
        deep: true,
        handler: function (newV, oldV) {
          // this.menuFather = []
          // this.menuFather = newV
          console.log(newV);
        }
      }
    },
    methods: {
      getRoleMenu() {
        menuApi.getRoleMenu(this.roleId).then(res => {
          console.log(res);
          this.value = []
          this.value = res.data.chooseId
          this.data = res.data.menuDtos
          console.log(this.value);
        }).catch()
      },
      selectChange(value) {
        console.log("这是当前被选中的ids", value);
        menuApi.setMenu(this.roleId, value).then(res => {
          console.log(res);
        })
      },
      //获得当前选择的角色
      roleChange(role) {

        for (const key in this.roles) {
          if (this.roles[key].role == this.chooseRole) {
            this.roleId = this.roles[key].id

            this.getRoleMenu()
          }
        }
      },

      //获取所有角色
      getAllRole() {
        roleApi
          .findAllRole()
          .then((response) => {
            this.roles = response.data
            console.log('所有角色', this.roles)
          })
          .catch()
      },
      //关闭编辑按钮
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },
      //获取父级菜单
      findAllFidMenu() {
        menuApi.findAllFidMenu().then(res => {
          console.log("父级菜单", res);
          this.menuFather = res.data
        }).catch(e => {
          console.log(e);
        })
      },

      //提交表单
      submitForm() {
        console.log(this.ruleForm);
        menuApi.addMenuSon(this.ruleForm).then(res => {
          this.dialogVisible = false
          this.findAllFidMenu()
          this.$message({
            message: res.message,
            type: 'success',
          })


        }).catch(e => {
          console.log(e);
        })
      },
      fatherMenuChange(menuFather) {
        for (const key in this.menuFather) {
          if (this.menuFather[key].title == this.fatherMenuName) {
            this.ruleForm.fid = this.menuFather[key].fid
            console.log(this.ruleForm.fid);
          }
        }
      },
      //增加子菜单
      addMenu() {
        this.dialogVisible = true
        this.ruleForm = {}
      },
      //增加父级菜单
      addFather() {
        menuApi.addMenuFather(this.fatherObj).then(res => {
          this.dialogVisible_father = false
          this.$message({
            message: res.message,
            type: 'success',
          })
          this.findAllFidMenu()
        })
      },
      showSwitch(value) {
        console.log(this.ruleForm.requireAuth, value);
      },
      // fit() {

      // }

    },


  };

</script>
